<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单中心</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--上传-->
    <el-dialog title="导入文件" :visible.sync="importBom">
      <el-upload
        class="upload-demo"
        drag
        action='/api/order/imporExcel'
        :on-success="importOrder"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
      </el-upload>
    </el-dialog>
    <!--查看日志-->
    <el-dialog title="支付日志" :visible.sync="isshow">
      <el-table
        :data="PayLogById"
        stripe
        style="width: 100%">
        <el-table-column
          label="交易时间"
          prop="createTime">
          <template slot-scope="scope">
            {{scope.row.createTime | datefmt('YYYY-MM-DD hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          label="交易说明"
          prop="tradeState">
        </el-table-column>
        <el-table-column
          label="交易类型"
          prop="payType">
        </el-table-column>
      </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isshow = false">关闭</el-button>
        </div>
      </el-dialog>
    <el-dialog title="选择工艺员" :visible.sync="isshow2">
      <el-form v-model="makerForm">
        <el-form-item>
          <el-select v-model="makerForm.mkid" placeholder="请选择">
            <el-option v-for="it in makerList"
              :label="it.fullName" :value="it.id" :key="it.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="submitAddMaker" type="primary" class="btn">提交</el-button>
    </el-dialog>
    <!--数据查询-->
    <el-card class="box-card2">
      <el-form :model="searchForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="3">
              <!--订单编号模糊查询-->
              <el-input placeholder="订单编号" v-model="searchForm.code" class="btn"></el-input>
            </el-col>
            <el-col :span="3">
              <!--订单编号客户模糊查询-->
              <el-input placeholder="客户名" v-model="searchForm.customerName" class="btn"></el-input>
            </el-col>
            <el-col :span="4">
              <!--订单生成时间区间查询-->
              <el-date-picker
                v-model="searchForm.min"
                type="date"
                placeholder="选择起始日期">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <!--订单生成时间区间查询-->
              <el-date-picker
                v-model="searchForm.max"
                type="date"
                placeholder="选择结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-select v-model="searchForm.state" placeholder="请选择状态">
                <el-option label="未提交" value="0"></el-option>
                <el-option label="已提交" value="1"></el-option>
                <el-option label="已工艺" value="2"></el-option>
                <el-option label="已报价" value="3"></el-option>
                <el-option label="已支付" value="4"></el-option>
                <el-option label="已转合同" value="5"></el-option>
                <el-option label="已关闭" value="6"></el-option>
              </el-select>
            </el-col>
            <el-button @click="searchOrder" plain type="info" class="btn"  icon="el-icon-search">搜索</el-button>
            <el-button @click="toOrderAdd" type="primary" class="btn">添加订单</el-button>
            <el-button @click="importBom=true" type="info" class="btn"><i class="el-icon-download el-icon--right"></i>导入</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!--原材料列表展示-->
    <el-card class="box-card">
      <el-table
        :data="orderList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="code"
          width="180">
        </el-table-column>
        <el-table-column
          label="客户"
          prop="customerName"
          width="180">
        </el-table-column>
        <el-table-column
          label="税率"
          prop="taxRate"
          width="180">
        </el-table-column>
        <el-table-column
          label="联系人"
          prop="linkmanName"
          width="180">
        </el-table-column>
        <el-table-column
          label="联系电话"
          prop="linkmanTel"
          width="180">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          width="180">
          <template slot-scope="scope">
            {{scope.row.createDate | datefmt('YYYY-MM-DD hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateDate"
          width="180">
          <template slot-scope="scope">
            {{scope.row.updateDate | datefmt('YYYY-MM-DD hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          prop="state"
          width="180">
          <template slot-scope="scope">
            {{scope.row.state | statefmt}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click">
              <el-button @click="getOrder(scope)" type="success"><i class="el-icon-search" plain></i></el-button><!--详情按钮-->
              <el-button @click="del(scope)" type="danger"><i class="el-icon-delete" circle></i></el-button><!--删除按钮-->
              <el-button @click="update(scope)" type="primary"><i class="el-icon-edit" circle></i></el-button><!--修改按钮-->
              <el-button @click="getPayLog(scope)" type="text">支付记录</el-button>
              <el-button @click="getOrderLog(scope.row)" type="text">查看操作日志</el-button>
              <el-button v-if="scope.row.state==0" @click="update(scope)" type="text">修改</el-button><!--修改按钮-->
              <el-button v-if="scope.row.state==0" @click="ckMakePeople(scope.row)" type="text">提交</el-button><!--提交按钮-->
              <el-button v-if="scope.row.state==2" @click="updataState(scope.row,3)" type="text">生成报价</el-button><!--报价按钮-->
              <el-button v-if="scope.row.state==2 || scope.row.state==3" @click="updataState(scope.row,6)" type="text">关闭订单</el-button><!--关闭订单按钮-->
              <el-button v-if="scope.row.state==3" @click="outPut(scope.row)" type="text">导出报价单</el-button><!--导出按钮-->
              <el-button v-if="scope.row.state==4" @click="updataState(scope.row,5)" type="text">转合同</el-button><!--转合同按钮-->
              <el-button slot="reference" type="text">更多操作</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>
    <el-dialog
      title="订单记录"
      :visible.sync="orderLogVisible"> <!--零件列表框 -->
      <el-table
        :data="loglist"
        stripe
        style="width: 100%">
        <el-table-column
          label="操作人"
          prop="userName">
        </el-table-column>
        <el-table-column
          label="操作说明"
          prop="remarks">
        </el-table-column>
          <el-table-column
            label="操作时间"
            prop="createtime">
            <template slot-scope="scope">
              {{scope.row.createtime | datefmt('YYYY-MM-DD hh:mm:ss')}}
            </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "orderList",
      data(){
        return{
          ff:'',//标志
          isshow:false,//查看支付日志弹出框的属性
          isshow2:false,//查看支付日志弹出框的属性
          makerList:[{id:"",fullName:''}],//工艺员下拉
          makerForm:{mkid:''},
          importBom:false,//显示导入框属性
          orderLogVisible:false,//订单记录
          orderList: [
            {price:'',pricelt:'',state:''}
            ],
          orderById: {},//回显详情对象
          searchForm:{
            code:'',
            min:'',
            max:'',
          },
          us:{
            id:'',
            userName:'',
            fullName:'',
          },//获取会话的用户对象
          page: {
            pagenum: 0,
            pagesize: 5
          },
          total: 0,
          loglist:[],//订单记录
          username:null,
          userId:null,
          PayLogById:[],//支付记录
        }

      },
      methods:{
        getOrderLog:function(row){//订单记录
          this.orderLogVisible=true;
          //弹框实现订单记录
          this.$http.post("/orderlog/getById/"+row.id).then((res) => {
            if(res.data.success){
              this.$message.success(res.data.message);
              this.loglist = res.data.result;
            }else{
              this.$message.error(res.data.message);
            }
          });
        },
        ckMakePeople(row){ //选择工艺人
          this.ff=row.id;//确定订单
          this.$http.get("/userRole/findAllMaker").then((res)=>{
              this.makerList=res.data.result;
              this.isshow2=true;
          })
        },
        submitAddMaker(){ ////状态为已提交
          debugger
          let name= this.username;
          let userid=this.userId;
          let ck=1;
          let id=this.ff;
          let mkid=this.makerForm.mkid;
          let makerid=this.makerForm.mkid;//获取工艺人id
          this.$http.post("order/orderAddMaker/"+id+"/"+ck+"/"+name+"/"+userid+"/"+makerid).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
              this.searchOrder();
              this.isshow2=false;
            }else{
              this.$message.error(res.data.message);
            }
          })
        },
        updataState(row,ck){ //修改状态
          debugger
          let name= this.username;
          let userid=this.userId;
          this.$http.post("order/updateStatus/"+row.id+"/"+ck+"/"+name+"/"+userid).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
              this.searchOrder();
            }else{
              this.$message.error(res.data.message);
            }
          })
        },
        outPut(row){//导出
          debugger;
          let id=row.id;
          location.href="http://localhost:8080/order/exportExcel/"+id;
        },
        importOrder(res,file){//文件上传成功后处理
          debugger
          this.searchOrder();
          this.importBom=false;
        },
        del(scope){//删除
          let id=scope.row.id;
          this.$http.post("/order/del/"+id).then((res) => {
            if (res.data.success) {
              this.$message({
                message:res.data.message,
                type:"success"
              })
            } else {
              this.$message.error(res.data.message);
            }
            //刷新
            this.searchOrder();
          });
        },
        toOrderAdd(){//添加
          this.$router.push("/orderAdd")
        },
        getOrder(scope){//查看详情
          var ids=123;
          this.$router.push({path:'orderUpdate',query:{id:scope.row.id,ids:ids}});
          //弹框实现回显
        },
        getPayLog(scope){//回显支付日志
          this.$http.post("/paylog/getById/"+scope.row.code).then((res) => {
            debugger
            if(res.data.success){
              this.isshow=true;
              this.PayLogById= res.data.result;
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
          });
        },
        updateByid(scope){//修改税后价格
          debugger
          let id=scope.row.id;
          let order=scope.row;
          this.$http.post("/order/updateByid/"+id,order).then((res) => {
            if (res.data.success) {
              this.$message({
                message:res.data.message,
                type:"success"
              })
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        update(scope){//编辑
          let id=scope.row.id;
          //跳转路由后查询显示
          this.$router.push('/orderUpdate?id='+id);
        },
        searchOrder() {//列表
          this.$http.post("/order/list/" + this.page.pagenum + "/" + this.page.pagesize+ "/" + this.us.id, this.searchForm).then((res) => {
            debugger
            this.orderList = res.data.result.list;
            this.total = res.data.result.total;
          });
        },
        handleSizeChange: function (val) {//每页显示的条数
          this.page.pagesize = val;
          this.searchOrder();
        },
        handleCurrentChange: function (val) {//显示的页数
          this.page.pagenum = val;
          this.searchOrder();
        }
      },
      mounted() {
        this.us=JSON.parse(sessionStorage.getItem("user"));
        let user=JSON.parse(sessionStorage.getItem("user")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
        this.username=user.userName; //当前登录人
         this.userId=user.id; //当前登录人id
        this.searchOrder();
      }
    }
</script>

<style scoped>
  .box-card2{/*搜索框的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .btn{/*按钮的圆角样式*/
    border-radius: 30px;
  }
</style>
